<template>
  <div class="goods-list">
    <div class="goods-item" @click="goDetail(11111111)">
      <img src="https://img10.360buyimg.com/n7/jfs/t1/42414/34/14090/280081/5d720181Ef1fb554d/814a53bab9544bd2.jpg" alt="">
      <strong class="price">
        <em>￥</em>
        <i>5599.00</i>
      </strong>
      <p class="p-name"> 戴尔DELL游匣G3 15.6英寸英特尔酷睿i5 </p>
      <p>已有<span>19万+</span>人评价</p>
    </div>

    <div class="goods-item" @click="goDetail(2222222)">
        <img src="https://img12.360buyimg.com/n7/jfs/t1/79105/5/1549/275769/5cfe0819E05803cb2/d56d258b14bad253.jpg" alt="">
        <strong class="price">
          <em>￥</em>
          <i>6180.00</i>
        </strong>
        <p class="p-name"> 戴尔DELL游匣G3 15.6英寸英特尔酷睿i5 </p>
        <p>已有<span>20万+</span>人评价</p>
      </div>

      <div class="goods-item" @click="goDetail(3333333333)">
          <img src="https://img13.360buyimg.com/n7/jfs/t1/48461/4/9947/224975/5d732120E5434d220/34748f89e697f22f.jpg" alt="">
          <strong class="price">
            <em>￥</em>
            <i>6679.00</i>
          </strong>
          <p class="p-name"> 戴尔DELL游匣G3 15.6英寸英特尔酷睿i5     </p>
          <p>已有<span>17万+</span>人评价</p>
        </div>

        <div class="goods-item" @click="goDetail(4444444444)">
            <img src="https://img14.360buyimg.com/n7/jfs/t1/43860/18/11713/168577/5d514582E4197d495/3bef1e988d3c10e5.jpg" alt="">
            <strong class="price">
              <em>￥</em>
              <i>5999.00</i>
            </strong>
            <p class="p-name"> 戴尔DELL游匣G3 15.6英寸英特尔酷睿i5 </p>
            <p>已有<span>21万+</span>人评价</p>
          </div>

          <div class="goods-item" @click="goDetail(5555555555)">
              <img src="https://img13.360buyimg.com/n7/jfs/t1/50726/15/1257/215083/5cef90f6Efef722f6/acc3a18650404548.jpg" alt="">
              <strong class="price">
                <em>￥</em>
                <i>6709.00</i>
              </strong>
              <p class="p-name"> 戴尔DELL游匣G3 15.6英寸英特尔酷睿i5</p>
              <p>已有<span>18万+</span>人评价</p>
            </div>



  </div>
</template>
<script>
  export default {
    data() {
      return{

      }
    },
    methods: {
      goDetail(id) {
        this.$router.push({ name:"goodsInfo",params: { id } });
      }
    }
  };
</script>
<style>
  body{
    background-color: #eeeeee;
  }
  .goods-item img {
    /* display: block; */
    width: 100%;
    margin-bottom: 15px;
  }
  .goods-item p span {
    color: #646fb0;
    font-weight: 700;
  }
  .p-name {
    color: #666666;
    line-height: 20px;
    word-break: break-all;
    overflow: hidden;
  }
  .price {
    color: #e4393c;
  }
  .goods-list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .goods-item {
    padding: 10px;
    width: 49%;
    border: 1px solid #cccccc;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 5px;

    
  }
</style>